<template>
  <div class="max-w-3xl mx-auto">
    <div class="bg-dark-light rounded-xl p-8 border border-gray-custom mb-8">
      <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
        <div class="w-32 h-32 rounded-full overflow-hidden border-4 border-primary/50 flex-shrink-0">
          <img :src="pictureUrl" alt="科技创客" class="w-full h-full object-cover">
        </div>
        
        <div>
          <h1 class="text-3xl font-bold text-white mb-4">关于我</h1>
          <p class="text-gray-300 mb-4">你好！我是一名科技爱好者，热衷于探索各种新兴技术和创意制作。</p>
          <p class="text-gray-300 mb-4">我的主要兴趣领域包括：</p>
          <ul class="list-disc list-inside text-gray-300 space-y-2 mb-6 ml-2">
            <li>3D打印技术与应用</li>
            <li>电子DIY与嵌入式系统</li>
            <li>Web开发与软件开发</li>
            <li>开源硬件与开源软件</li>
          </ul>
          <p class="text-gray-300">开设这个博客的目的是分享我的学习经验和项目实践，希望能帮助到更多志同道合的朋友。</p>
        </div>
      </div>
    </div>
    
    <div class="bg-dark-light rounded-xl p-8 border border-gray-custom">
      <h2 class="text-2xl font-bold text-white mb-6">我的设备</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gray-custom/20 rounded-lg p-4 text-center">
          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/20 flex items-center justify-center">
            <i class="fa fa-cube text-primary text-2xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2">3D打印机</h3>
          <p class="text-gray-400 text-sm">Creality Ender 3 V2<br>Anycubic Photon Mono X</p>
        </div>
        
        <div class="bg-gray-custom/20 rounded-lg p-4 text-center">
          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-secondary/20 flex items-center justify-center">
            <i class="fa fa-microchip text-secondary text-2xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2">开发板</h3>
          <p class="text-gray-400 text-sm">Arduino Uno<br>ESP32 DevKitC<br>Raspberry Pi 4</p>
        </div>
        
        <div class="bg-gray-custom/20 rounded-lg p-4 text-center">
          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-accent/20 flex items-center justify-center">
            <i class="fa fa-laptop text-accent text-2xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2">开发设备</h3>
          <p class="text-gray-400 text-sm">MacBook Pro<br>Linux 工作站<br>各种传感器模块</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入通用图片路径
import { pictureUrl } from '@/assets/image';

export default {
  name: 'AboutPage',
  data() {
    return {
      pictureUrl
    }
  }
}
</script>

<style scoped>
/* 关于页特定样式 */
</style>
    